<template>
    <div class="order-refund-detail-info">
        <div class="order-refund-detail-info-content">
            <div class="order-refund-detail-info-header">退款信息</div>
            <order-refund-item v-for="item in refund.items" :key="item.id" :item="item" reason/>
        </div>
        <div class="order-refund-detail-fields">
            <van-field class="order-refund-detail-field" label="售后方式" :value="kind" :border="false" colon center readonly/>
            <van-field class="order-refund-detail-field" label="总金额" :value="refund.totalAmount" :border="false" colon center readonly/>
            <van-field class="order-refund-detail-field" label="售后编号" :value="refund.id" :border="false" colon center readonly/>
            <van-field class="order-refund-detail-field" label="申请时间" :value="refund.appliedTime" :border="false" colon center readonly/>
        </div>
    </div>
</template>

<script>
  import { order } from "@mall/api-services"
  import { Card, Field } from "vant"
  import OrderRefundListItem from "@/components/order/OrderRefundListItem"
  import OrderRefundItem from "@/components/order/OrderRefundItem"

  const { OrderRefundKind } = order

  export default {
    name: "OrderRefundDetailInfo",
    components: {
      OrderRefundItem,
      OrderRefundListItem,
      [Card.name]: Card,
      [Field.name]: Field,
    },
    props: {
      refund: order.OrderRefund,
    },
    computed: {
      kind() {
        const { refund } = this
        if (refund.kind === OrderRefundKind.OnlyRefund) {
          return "仅退款"
        } else if (refund.kind === OrderRefundKind.ReturnRefund) {
          return "退货退款"
        }
        return "未知"
      },
    },
  }
</script>

<style lang="scss" scoped>
    .order-refund-detail-info {
        .order-refund-detail-info-content {
            background: #fff;

            .order-refund-detail-info-header {
                padding: 9px;
            }

            .order-refund-detail-info-card {
                margin-top: 0;
            }

            .order-refund-detail-info-item-l2 {

            }
        }

        .order-refund-detail-fields {
            background: #fff;

            .order-refund-detail-field {
                line-height: 14px;
                padding: 9px 9px 0 9px;

                &:last-child {
                    padding-bottom: 9px;
                }
            }
        }
    }
</style>
